<template>
	<swiper :current="current" circular :autoplay="autoplay" :interval="interval" :duration="duration" @change="imgChange"
		:previous-margin="itemMargin + 'px'" :next-margin="itemMargin + 'px'">
		<swiper-item class="swiper-item" v-for="(item, index) in imgList" :key="index">
			<image :class="current == index ? 'imgActive' : ''" :src="item" mode=""></image>
		</swiper-item>
	</swiper>
</template>

<script>
	export default {
		data() {
			return {
				current: 0
			};
		},
		props: {
			imgList: {
				type: Array,
				default: () => []
			},
			autoplay: {
				type: Boolean,
				default: false
			},
			interval: {
				type: Number,
				default: 3000
			},
			duration: {
				type: Number,
				default: 1000
			},
			itemMargin: {
				type: Number,
				default: 30
			},
			circular: {
				type: Boolean,
				default: false
			}
		},
		mounted() {
			
		},
		methods: {
			imgChange(e) {
				this.current = e.detail.current
			}
		}
	};
</script>

<style lang="scss" scoped>
	swiper {
		height: 300rpx;
	
		swiper-item {
			height: 300rpx;
	
			image {
				width: 100%;
				height: 100%;
				transform: scale(0.95);
				border-radius: 10rpx;
			}
	
			.imgActive {
				transform: scale(1);
			}
		}
	}
</style>
